<template>
    <div>
        <h1>vue3定义响应变量配合ts使用</h1>
        <ul>
            <li>{{ count }}</li>
            <li>{{ str }}</li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <hr>
        <ul>
            <li v-for="item in list3" :key="item.id">{{ item.name }}</li>
        </ul>
        <hr>
        <p>{{ newList }}</p>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
// 说明:ref是泛型函数,可以接收泛型类型参数
// 1.简单类型
const count = ref(0)
const str = ref<string>('')

// 2.复杂类型 
const list = ref([
    {
        id: 0,
        name: '学习',
        done: false
    },
    {
        id: 1,
        name: '找工作',
        done: false
    }
])

console.log(list)

// // 实际开发,数据从后台异步获取,这时候无法让ts做类型推断了,这时候就需要手动通过泛型来指定类型是什么
// const list2 = ref([

// ])
// setTimeout(() => {
//     // 不能将类型“{ id: number; name: string; done: false; }”分配给类型“never”
//     list2.value = [
//         {
//             id: 0,
//             name: '学习',
//             done: false
//         },
//         {
//             id: 1,
//             name: '找工作',
//             done: false
//         }
//     ]
// }, 2000)


// const list3=ref<{
//     id:number,
//     name:string,
//     done:boolean
// }[]>()

type List = {
    id: number,
    name: string,
    done: boolean
}[]

const list3 = ref<List>([])

setTimeout(() => {
    // 不能将类型“{ id: number; name: string; done: false; }”分配给类型“never”
    list3.value = [
        {
            id: 0,
            name: '学习',
            done: false
        },
        {
            id: 1,
            name: '找工作',
            done: false
        }
    ]
}, 2000)



// 需求:使用计算属性获取id=1的数据
// 自动推断类型
const newList = computed(() => {
    return list3.value.filter(item => item.id === 1)
})


// reactive
interface Book {
    title: string
    year?: number
}

const book = reactive<Book>({ title: 'Vue3 指引' })

console.log(book)


</script>

<style scoped></style>